<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='echarts/echarts.min.js') }}"></script>
    <script>
        $(function (){  //JQuery启动函数
            ra()
            lc()
            bar()
            pie()
        })
        function ra(){
            var ra = echarts.init(document.getElementById("ra"))
            var option = {
                legend: {
                    data: ['本月上新数目', '预计上新书目']
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: '修真类', max: 6500},
                        { name: '玄幻类', max: 16000},
                        { name: '科幻类', max: 30000},
                        { name: '穿越类', max: 38000},
                        { name: '网游类', max: 52000},
                        { name: '都市类', max: 25000}
                    ]
                },
                series: [{
                    type: 'radar',
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '本月上新数目'
                        },
                        {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: '预计上新书目'
                        }
                    ]
                }]
            };
            ra.setOption(option);
        }
        function lc(){
            var lc = echarts.init(document.getElementById("lc"))
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['上周', '本周']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '上周',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '本周',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                ]
            };
            lc.setOption(option)
        }
        function pie() {
            $.ajax({
                url:"getUnivTagsDataForPie",
                method:"get",
                success:function (result){
                    var jsonObj=JSON.parse(result);
                    var pie = echarts.init(document.getElementById('pie'))
                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: true,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: true
                                },
                                data: jsonObj
                            }
                        ]
                    };
                    pie.setOption(option);
                },
                error:function (e){
                    layer.msg("请求服务器失败");
                }
            });

        }
        function bar(){
            $.ajax({
                url: "/getUserDataForBar",
                method: "get",
                success: function (result) {
                    jsonObj = JSON.parse(result)
                    var list1 = jsonObj["enable"]
                    var list2 = jsonObj["count"]
                    var bar = echarts.init(document.getElementById('bar'))
                    // 指定图表的配置项和数据
                    var option = {
                        tooltip: {},
                        xAxis: {
                            data: list1
                        },
                        yAxis: {},
                        series: [{
                            type: 'bar',
                            data: list2
                        }]
                    };
                    bar.setOption(option);
                },
                error: function (e) {
                    layer.msg("请求服务器失败!")
                }
            });
        }
    </script>
</head>
<body>

<div class="layui-elem-quote">
    图书分析
</div>
{#<div class="layui-container">#}
<div class="layui-row layui-col-space4">
    <div class="layui-col-xs6">
        <div class="layui-card">
            <div class="layui-card-header layui-bg-green">图书类别书本统计</div>
            <div class="layui-card-body">
                <div id="bar" style="width:100%;height: 400px "></div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="layui-card">
            <div class="layui-card-header layui-bg-green">小说类别受欢迎程度</div>
            <div class="layui-card-body">
                <div id="pie" style="width:100%;height: 400px "></div>
            </div>
        </div>
    </div>

</div>
<div class="layui-row layui-col-space4">
    <div class="layui-col-xs6">
        <div class="layui-card">
            <div class="layui-card-header layui-bg-green">本月vs下月上新数目</div>
            <div class="layui-card-body">
                <div id="ra" style="width:100%;height: 400px "></div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="layui-card">
            <div class="layui-card-header layui-bg-green">销量对比图</div>
            <div class="layui-card-body">
                <div id = "lc" style="width:100%;height: 400px "></div>
            </div>
        </div>
    </div>
</div>
{#</div>#}

<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>